<!--
  Copyright (c) 2018-2999 广州市蓝海创新科技有限公司 All rights reserved.

  https://www.mall4j.com/

  未经允许，不可做商业用途！

  版权所有，侵权必究！
-->

<template>
  <view class="Mall4j component-mobile-add-or-update">
    <uni-popup
      ref="sharePopRef"
      background-color="#fff"
      :is-mask-click="false"
      class="pop-mask"
    >
      <view class="popup">
        <view class="title-box">
          <text class="title">
            {{ isHaveMobile ? '解绑手机' : '绑定手机' }}
          </text>
          <view
            class="close"
            @tap="onPopClose"
          >
            <image
              src="@/static/images/close.png"
              class="del-img"
            />
          </view>
        </view>
        <view class="input-con amount-input-con">
          <uni-forms
            ref="dataFormRef"
            :model-value="dataForm"
          >
            <uni-forms-item
              key="mobile"
              name="mobile"
            >
              <view class="title">
                <text class="star">
                  *
                </text>
                <text class="txt">
                  手机号
                </text>
              </view>
              <view class="input-box">
                <view class="mobile-input">
                  <uni-easyinput
                    v-model="dataForm.mobile"
                    :disabled="isHaveMobile"
                    placeholder="请输入银行预存手机号"
                    maxlength="11"
                    suffix-icon="none"
                    @blur="onCheckInput('mobile')"
                  />
                  <view class="suffixIcon">
                    <view
                      v-if="countdown===0"
                      class="get-code-btn"
                      @tap="onGetCode"
                    >
                      获取验证码
                    </view>
                    <text
                      v-else
                      class="get-code-btn"
                    >
                      {{ countdown }} s
                    </text>
                  </view>
                </view>
                <view
                  v-if="errorTip===1"
                  class="tips"
                >
                  手机号不能为空
                </view>
                <view
                  v-if="errorTip===2"
                  class="tips"
                >
                  请输入正确的手机号
                </view>
              </view>
            </uni-forms-item>
            <uni-forms-item
              key="validCode"
              name="validCode"
            >
              <view class="title">
                <text class="star">
                  *
                </text>
                <text class="txt">
                  验证码
                </text>
              </view>
              <view class="input-box">
                <uni-easyinput
                  v-model="dataForm.validCode"
                  placeholder="请输入验证码"
                  maxlength="11"
                  @blur="onCheckInput('validCode')"
                />
                <view
                  v-if="errorTip===3"
                  class="tips"
                >
                  验证码不能为空
                </view>
              </view>
            </uni-forms-item>
          </uni-forms>
        </view>
        <view
          class="footer-btn"
          @tap="onSubmit"
        >
          确认
        </view>
      </view>
    </uni-popup>
  </view>
</template>
<script setup>
const props = defineProps({
  isHaveMobile: {
    default: false,
    type: Boolean
  }
})
const emit = defineEmits(['refreshDataForm'])

const dataForm = reactive({
  mobile: '', // 手机号
  validCode: ''
})

const init = (mobile) => {
  sharePopRef.value.open('center')
  dataForm.mobile = mobile
}

/**
 * 获取验证码
 */
let isSubmit = false
const countdown = ref(0) // 倒计时
const onGetCode = () => {
  if (isSubmit) {
    return
  }
  if (!onGetTip(false)) {
    return
  }
  isSubmit = true
  const params = {
    url: '/shop/allinpay/company/sendVerificationCode',
    method: 'post',
    data: {
      phone: dataForm.mobile,
      verificationCodeType: props.isHaveMobile ? 6 : 9
    }
  }
  http.request(params).then(() => {
    isSubmit = false
    countdown.value = 60
    onGetCountdown()
  }).catch(() => {
    isSubmit = false
  })
}

let timer = ''
const onGetCountdown = () => {
  timer = setInterval(() => {
    countdown.value--
    if (countdown.value === 0) {
      clearInterval(timer)
    }
  }, 1000)
}
const onSubmit = () => {
  if (isSubmit) {
    return
  }
  if (!onGetTip(true)) {
    return
  }
  isSubmit = true
  const params = {
    url: props.isHaveMobile ? '/shop/allinpay/company/unbindPhone' : '/shop/allinpay/company/bindPhone',
    method: props.isHaveMobile ? 'put' : 'post',
    data: {
      phone: dataForm.mobile,
      verificationCode: dataForm.validCode
    }
  }
  http.request(params).then(() => {
    isSubmit = false
    uni.showToast({
      title: props.isHaveMobile ? '解绑成功' : '绑定成功',
      icon: 'success'
    })
    sharePopRef.value.close()
    dataForm.mobile = ''
    dataForm.validCode = ''
    emit('refreshDataForm')
  }).catch((err) => {
    uni.showToast({
      title: err.msg,
      icon: 'none'
    })
    isSubmit = false
  })
}
/**
 * 检查输入框空格
 */
const onCheckInput = (type) => {
  const reg = /^\s+$/g
  if (type === 'mobile' && reg.test(dataForm.mobile)) {
    dataForm.mobile = ''
  } else if (type === 'validCode' && reg.test(dataForm.validCode)) {
    dataForm.validCode = ''
  }
}

const errorTip = ref(0)
const onGetTip = (isCode) => {
  if (!dataForm.mobile) {
    errorTip.value = 1
    return false
  }
  const reg = /^1[0-9]{10}$/
  if (!reg.test(dataForm.mobile)) {
    errorTip.value = 2
    return false
  }
  if (isCode && !dataForm.validCode) {
    errorTip.value = 3
    return false
  }
  errorTip.value = 0
  return true
}
const sharePopRef = ref(null)
const onPopClose = () => {
  sharePopRef.value.close()
}
defineExpose({
  init
})
</script>

<style lang="scss" scoped>
@use './mobile-add-or-update.scss';
</style>
